{% extends 'front/base.html' %}

{% block title %}
  登录
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('static',filename='front/css/sign.css') }}">
  <style>
    body {
      background-image: url('{{ url_for('static', filename='common/images/animal-4.jpg') }}');
      background-size: cover; /* 让背景图片覆盖整个页面 */



    }


    /* 您可以根据需要添加其他样式 */
    .sign-box {
      /* 假设您有一个容器来包裹表单内容，以防止背景图片影响表单的可读性 */
      background-color: rgba(255, 255, 255, 80); /* 半透明白色背景 */
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 50%;
      float:center;
      padding-top: 20px;
      overflow: hidden;
    }
  </style>
{% endblock %}

{% block body %}

  <div class="sign-box">
    <h1 class="page-title">登录</h1>
    <form action="{{ url_for('user.login') }}" method="post">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="form-group">
        <input type="text" class="form-control" name="email" placeholder="邮箱">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" name="password" placeholder="密码">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" name="remember" value="1">记住我
        </label>
      </div>
      {% with messages = get_flashed_messages() %}
        {% if messages %}
          <div class="form-group">
            <ul>
              {% for message in messages %}
                <li class="text-danger">{{ message }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}
      {% endwith %}
      <div class="form-group">
        <button class="btn btn-warning btn-block" id="submit-btn">立即登录</button>
      </div>
      <div class="form-group">
        <a href="{{ url_for('user.register') }}" class="signup-link">没有账号？立即注册</a>
        <a href="#" class="resetpwd-link" style="float:right;">找回密码</a>
      </div>
    </form>
  </div>
{% endblock %}